<template>
	<view class="login-content">
		<u-navbar :is-back="false" title="登录"></u-navbar>
		<u-form :model="form" ref="uForm" :error-type="errorType">

			<u-form-item label="学号" prop="studentID">
				<u-input v-model="form.studentID" type="number" placeholder="请输入学号" />
			</u-form-item>

			<u-form-item label="密码" prop="password">
				<u-input v-model="form.password" type="password" placeholder="请输入密码" />
			</u-form-item>

		</u-form>

		<u-button type="primary" @click="submit">登录</u-button>

		<view class="register-and-reset">
			<view @click="goToResetPasswordPage">
				{{'<'}}-忘记密码？邮箱找回
			</view>

			<view @click="goToRegisterPage">
				没有账号？点击注册->
			</view>
		</view>


		<!-- 以下为验证登录后，必要的其他弹出组件 -->
		<u-mask :show="isCheckingLoginStatus"></u-mask>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单填写错误的提示形式
				errorType: ['message'],
				// 是否在检查登录状态中
				isCheckingLoginStatus: false,
				// 发往后端的登录表单数据
				form: {
					studentID: '',
					password: '',
					token: ''
				},
				// 校验规则
				rules: {
					studentID: [{
							required: true,
							message: '请输入学号',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						},
						{
							type: 'number',
							message: '学号必须为数字',
							trigger: ['change', 'blur']
						},
						{
							min: 8,
							message: '学号至少为 8 位',
							trigger: ['change', 'blur']
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur']
						},
						{
							min: 6,
							message: '密码不能小于 6 个字符',
							trigger: ['change', 'blur']
						}
					]
				}
			}
		},
		onLoad() {

		},
		methods: {
			// 提交表单的方法
			submit() {
				//请求成功后异步返回
				let _this = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// console.log('验证通过');
						// 展示遮罩层并发送后端请求
						this.$data.isCheckingLoginStatus = true

						this.$u.post('/user/login/student', {
							id: this.form.studentID,
							password: this.form.password
						}).then(res => {
							// 取消掉遮罩层
							_this.$data.isCheckingLoginStatus = false;
							console.log(res);
							if (res.statusCode === 0) {
								_this.$refs.uToast.show({
									title: '登录成功',
									type: 'success',
									icon: false,
									position: 'bottom'
								});
								uni.setStorage({
									key: 'UserMsg',
									data: {
										Token:res.rst,
										StuID:_this.form.studentID
									},
									success: function() {
										uni.reLaunch({
											url: '/pages/index/index'
										})
									}
								});
							} else {
								_this.$data.isCheckingLoginStatus = false;
								_this.$refs.uToast.show({
									title: '登录失败，请检查您的学号或密码',
									type: 'error',
									icon: false,
									position: 'bottom'
								});
							}
						}).catch(res =>{
							console.log(res)
							_this.$data.isCheckingLoginStatus = false;
							_this.$refs.uToast.show({
								title: '登录失败，请检查您的学号或密码',
								type: 'error',
								icon: false,
								position: 'bottom'
							});
						})
					} else {
						this.$refs.uToast.show({
							title: '请填写完整信息',
							type: 'error',
							icon: false,
							position: 'bottom'
						});
					}
				});
			},
			cancel(value) {
				// 预留
			},
			goToRegisterPage() {
				// 跳转到注册页面
				this.$u.route({
					type: 'navigateTo',
					url: '/pages/register/index',
					params: this.$data.form
				});
			},
			goToResetPasswordPage() {
				this.$u.route({
					type: 'navigateTo',
					url: '/pages/resetPassword/index',
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			let localValue = uni.getStorageSync('UserMsg');
			this.$data.form.studentID = localValue.StuID;
		}
	}
</script>

<style scoped lang="scss">
	/* 整个登录页面加了美化效果 */
	.login-content {
		margin: 0rpx 50rpx;
	}

	/* 该样式用于将 注册 字样居右并设置为蓝色, 提示用户可以点击 */
	.register-and-reset {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0rpx 0rpx 0rpx;
		color: #2979FF;
	}
</style>
